<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="../js/message.js"></script>
    <script type="text/javascript" src="../js/myUtil.js"></script>

    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap-theme.css">
    <link rel="stylesheet" type="text/css" href="../css/page.css">
    <link rel="stylesheet" type="text/css" href="../css/message.css">
</head>
<body>
    <br><br><br>
    <div class="container col-md-6 col-md-offset-3" style="background: #FFF888" id="createDiv">

        <br><br><br>
        <div style="font-size: 30px; color: #363636; font-family: 华文中宋,serif; text-align: center">创建贴吧</div>
        <br>

        <div class="row" style="font-size: 17px">
            <label class="col-md-11  col-md-offset-1" id="user" style="color: #0000cc;"></label>
        </div>
        <br>

        <div class="row" style="font-size: 17px">
            <label class="col-md-2  col-md-offset-1">贴吧名：</label>
            <input class="col-md-6" style="padding: 5px" type="text" name="postBarName" id="postBarName"/>
        </div>
        <br>

        <div class="row" style="font-size: 17px">
            <label class="col-md-2  col-md-offset-1">贴吧简介：</label>
            <textarea class="col-md-6" style="height: 100px; padding: 5px" name="postBarResume" id="postBarResume"></textarea>
        </div>
        <br>

        <div class="row" style="font-size: 17px">
            <label class="col-md-2  col-md-offset-1">验证码：</label>
            <input class="col-md-3" type="text" style="padding: 5px" name="userCode" id="userCode"/>
            <!--显示验证码-->
            <div class="col-md-2" style="margin-left: 45px" id="code"></div>
        </div>
        <br>

        <div class="row">
            <label class="col-md-6 col-md-offset-3" style="font-size: 14px; color: #FF0000" id="tip"></label>
        </div>

        <br>
        <div class="row" style="font-size: 17px">
            <button class="col-md-2 col-md-offset-3" id="register" onclick="cancel()">取消</button>
            <button class="col-md-2 col-md-offset-2" id="login" onclick="create()">创建</button>
        </div>
        <br><br><br>
    </div>

    <div class="container col-md-6 col-md-offset-3" style="background: #FFF888; text-align: center; display: none" id="tipDiv">
        <br><br><br>
        <div style="font-size: 30px; color: #363636; font-family: 华文中宋,serif; text-align: center">贴吧创建申请成功，请等待管理员审核~</div>
        <br><br>
        <button style="background: #00000000; border: 0; padding: 5px; font-size: 18px" onclick="returnPostBar()">返回贴吧</button>
        <br><br><br>
    </div>

    <script type="text/javascript">
        let user;
        let postBarName, postBarResume, postBarCode, tip;

        // 存放验证码
        let seCode;
        userCode = $("#userCode");

        // 引入验证码
        $("#code").load("securityCode.html", function (){
            seCode = nowCode;
            myCallback = getCode;
        });

        // 获取验证码的回调函数
        function getCode(code) {
            seCode = code;
        }

        // 请求得到用户信息
        $.post("/QG_PostBar/user?method=getUserBySession", function (data){
            user = data;
            $("#user").html("当前用户：" + user.userName);
        }, "json");

        function cancel() {
            window.location.href = "postBar.html";
        }

        function create() {
            if (check()) {
                $.post("/QG_PostBar/postBar?method=createPostBar", {"userId": user.userId , "postBarName": postBarName.val(), "postBarResume": postBarResume.val()}, function (data) {
                    if (data.postBarName != null) {
                        success_prompt("申请成功");
                        $("#createDiv").hide();
                        $("#tipDiv").show();
                    } else {
                        tip.html("创建失败！贴吧名已存在");
                    }
                }, "json");
            }
        }

        function returnPostBar() {
            window.location.href = "postBar.html";
        }

        function check() {
            postBarName = $("#postBarName");
            postBarResume = $("#postBarResume");
            postBarCode = $("#postBarCode");
            tip = $("#tip");

            if (postBarName.val().length < 3) {
                tip.html("贴吧名长度必须大于等于 3 ！");
                return false;
            } else if (postBarResume.val() === "") {
                tip.html("简介不能为空 ！");
                return false;
            } else if (postBarCode.val() === "") {
                tip.html("验证码不能为空！");
                return false;
            } else if (userCode.val() !== seCode) {
                tip.html("验证码错误，请重新输入！");
                return false;
            }
            else return true;
        }
    </script>
</body>
</html>